
<!-- page specific plugin styles -->
<!-- text fonts -->
<link rel="stylesheet" href="../assets/css/fonts.googleapis.com.css"/>

<!-- ace styles -->
<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style"/>
<link rel="stylesheet" href="../assets/css/fullcalendar.min.css"/>
<link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
<link rel="stylesheet" href="../assets/css/bootstrap-datepicker3.min.css"/>
<link rel="stylesheet" href="../assets/css/style.css" />
<style>
    td.fc-widget-header tr {
        height: 40px;
    }
    a.dealfruit-event {
        text-decoration: none;
        display:block;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    a.dealfruit-event:hover {
        color: red;
    }

</style>

<body style="background-color: #FFFFFF" onload="parent.scrollTo(0, 0);">
<div class="breadcrumbs ace-save-state" id="breadcrumbs">
</div>
<div class="page-content">
    <!-- <div class="page-header">
         <h1>

         </h1>
     </div>&lt;!&ndash; /.page-header &ndash;&gt;-->

    <div class="row">
        <div class="col-xs-12">
            <div class="space"></div>
            <form class="form-inline" id="searchForm" style="padding:2px 5px">
                <div class="form-group" style="width: 500px">
                    <label>起止日期:</label>
                    <div class="input-daterange input-group" id="datepicker" style="width:86%">
                        <input class="form-control datepicker" readonly="readonly" type="text" placeholder="起始时间"
                               id="searchStartTime" name="timeStart" style="background-color: rgba(221, 221, 221, 0)">
                        <span class="input-group-addon add-on">&nbsp;-&nbsp;</span>
                        <input class="form-control datepicker" readonly="readonly" type="text" placeholder="结束时间"
                               id="searchEndTime" name="timeEnd" style="background-color: rgba(221, 221, 221, 0)">
                    </div>
                </div>
                &#12288;
                <button type="button" class="btn-sm btn-primary" onclick="searchAll()"><i
                        class="glyphicon glyphicon-search"></i> 搜索
                </button>
            </form>
            <hr>
            <form class="form-inline" id="stuInfoForm">
                <div class="form-group" style="display: none;">
                    <label>id:</label>
                    <input type="text" id="stuId" name="stuId" >
                </div>
                <div class="form-group">
                    <label>姓名:</label>
                    <input type="text" id="stuName" name="stuName" style="border:0px">
                </div>
                &#12288;
                <div class="form-group" >
                    <label>口语:</label>
                    <input type="text" id="oral" name="oral" style="border:0px">
                </div>
                &#12288;
                <div class="form-group">
                    <label>听力:</label>
                    <input type="text" id="listening" name="listening" style="border:0px">
                </div>
                &#12288;
                <div class="form-group" >
                    <label>写作:</label>
                    <input type="text" id="writing" name="writing" style="border:0px">
                </div>
                &#12288;
                <div class="form-group">
                    <label>阅读:</label>
                    <input type="text" id="reading" name="reading" style="border:0px">
                </div>
                &#12288;
            </form>
            <hr>
            <div id="calendar"></div>
        </div>
        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->

</body>
<!-- PAGE CONTENT ENDS -->
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>


<!-- page specific plugin scripts -->

<script src="../assets/js/jquery-ui.custom.min.js"></script>
<script src="../assets/js/moment.min.js"></script>
<script src="../assets/js/fullcalendar.min.js"></script>
<script src="../assets/js/locale/zh-cn.js"></script>
<script src="../assets/js/bootstrap-datepicker.min.js"></script>
<script src="../assets/js/bootstrap-datepicker.zh-CN.js"></script>
<!-- ace scripts -->
<script src="../assets/js/ace-elements.min.js"></script>
<script src="../assets/js/ace.min.js"></script>

<script type="text/javascript">
    $.fn.modal.Constructor.prototype.enforceFocus = function () {
    };
    $(".input-daterange").datepicker({
        language: "zh-CN",
        format: "yyyy-mm-dd",
        autoclose: true,
        clearBtn: true,
        todayHighlight: true
    });
    var stuId = getParam();
    var timeStart = null, timeEnd = null;
    $(function () {
        var jsonStr = {
            crew_classTime_Arr: ["08:00~09:30", "10:00~11:30", "14:00~15:30", "16:00~17:30", "18:00~19:30"]
        };
        initFullCalendar(jsonStr);
        initStuInfo(stuId);
    });

    function initFullCalendar(jsonStr) {
        var crew_classTime_Arr = jsonStr["crew_classTime_Arr"];


        $("#calendar").fullCalendar('destroy');
        $("#calendar").fullCalendar({
            lang: "zh-cn",
            defaultView: "agendaWeek",
            contentHeight: 644,
            buttonText: {
                today: '今天',
                month: '月视图',
                week: '周视图',
                day: '日视图'
            },
            header: {
                left: 'prev,next today myCustomButton',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            allDaySlot: false,//是否显示全天
            axisFormat: 'H:mm时',
            slotDuration: '01:00:00',
            slotLabelFormat: '第H课',
            crew_classTime_Arr: crew_classTime_Arr,
            scrollTime: '01:00:00', //滚动起始时间
            displayEventTime: false, //默认不显示事件上的时间
            minTime: '01:00:00', //最小开始时间
            maxTime: '06:00:00',//最大开始时间
            defaultTimeEventDuration: '01:00:00',
            events: function (start, end, timezone, callback) {
                if(timeStart==null && timeEnd==null){
                    var date = this.getDate().format('YYYY-MM-DD');
                    $.ajax({
                        url: '/stuAvaTime/getStuAvaTime',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            currentDate: date,
                            stuId: stuId
                        },
                        success: function (result) {
                            var events = [];
                            var stuAvaTimeBizs = result.stuAvaTimeBizs;
                            $.each(stuAvaTimeBizs, function (i, t) {
                                var classDay = formatStamp(t.classDay);
                                var fromTime = classDay + "" + t.calFtime;
                                var toTime = classDay + "" + t.calTtime;
                                events.push({
                                    id: t.id,
                                    title: '',
                                    start: fromTime,
                                    end: toTime,
                                    className: "dealfruit-event"
                                });
                            });
                            callback(events);
                        },
                        error: function () {

                        }
                    });
                }else {
                    $.ajax({
                        url: '/stuAvaTime/getStuAvaTimeRange',
                        type: 'post',
                        dataType: 'json',
                        data: {
                            timeStart: formatStamp(timeStart),
                            stuId: stuId,
                            timeEnd: formatStamp(timeEnd)
                        },
                        success: function (result) {
                            var events = [];
                            var stuAvaTimeBizs = result.stuAvaTimeBizs;
                            $.each(stuAvaTimeBizs, function (i, t) {
                                var classDay = formatStamp(t.classDay);
                                var fromTime = classDay + "" + t.calFtime;
                                var toTime = classDay + "" + t.calTtime;
                                events.push({
                                    id: t.id,
                                    title: '',
                                    start: fromTime,
                                    end: toTime,
                                    className: "dealfruit-event"
                                });
                            });
                            callback(events);
                        },
                        error: function () {

                        }
                    });
                    $("#calendar").fullCalendar('gotoDate', timeStart);
                    timeStart = null;
                    timeEnd = null;
                }

            },
            eventRender: function (calEvent, element, view) {
            }
        });
    }

    function searchAll() {
        timeStart =$("#searchStartTime").datepicker("getDate");
        timeEnd = $("#searchEndTime").datepicker("getDate");
        $("#calendar").fullCalendar('refetchEvents');
    }

    function getDate() {
        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();
        m = m < 10 ? "0" + m : m;
        d = d < 10 ? "0" + d : d;
        return y + "-" + m + "-" + d;
    }
    function getParam() {
        var url=location.search;
        var Request = new Object();
        if(url.indexOf("?")!=-1){
            var str = url.substr(1)　//去掉?号
            strs = str.split("&");
            for(var i=0;i<strs.length;i++){
                Request[strs[i ].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        return Request["stuId"];
    }
    function initStuInfo(stuId) {
        $.ajax({
            url: '/teaStuClass/getStuClassCount',
            type: 'post',
            data: {
                stuId: stuId
            },
            dataType: 'json',
            success: function (result) {
                if (result.success) {
                    var stuClassCount = result.stuClassCount;
                    $("#stuId").val(stuClassCount.stuId);
                    $("#stuName").val(stuClassCount.stuName);
                    $("#oral").val(stuClassCount.oralNum+"/"+stuClassCount.applyOralCount);
                    $("#listening").val(stuClassCount.listeningNum+"/"+stuClassCount.applyListenCount);
                    $("#reading").val(stuClassCount.readingNum+"/"+stuClassCount.applyReadCount);
                    $("#writing").val(stuClassCount.writingNum+"/"+stuClassCount.applyWriteCount);
                }
            },
            error: function () {
                sweetAlert("Oops...", "数据加载失败", "error");
            }
        });
    }
    function formatStamp(now) {
        var date = new Date(now);
        Y = date.getFullYear() + '-';
        M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        D = date.getDate() + ' ';
        return (Y + M + D);
    }
</script>
